<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_父子组件相互传值</title>
</head>
<body>
    <div id="app">
        <cpn1 v-bind:recive-message="fatherMessage"></cpn1>
        <cpn2 :recive-message2="fatherMessage2"></cpn2>
    </div>
</body>

<template id="aa">
    <div>
        <h3>接收父组件传值: {{reciveMessage}}</h3>
    </div>
</template>

<template id="bb">
    <div>
        <h3>接收父组件传值2: {{reciveMessage2}}</h3>
    </div>
</template>

<script src="../vue.js"></script>
<script>
    let cpn1 = {
        template: '#aa',
        props: ['reciveMessage']
    }

    let cpn2 = {
        template: '#bb',
        props: {
            reciveMessage2: {
                type: String,
                default: '我是cpn2默认值...'
            }
        }
    }

    new Vue({
        el: '#app',
        data: {
            fatherMessage: '你好阿,儿子~~',
            fatherMessage2: '你好阿,儿子2~~'
        },
        components:{
            cpn1,
            cpn2
        }
    })

</script>
</html>